import React, { useEffect, useRef } from 'react'
import { Card, Col, Row, List, Drawer } from 'antd';
import { BarChartOutlined, EllipsisOutlined, PieChartOutlined } from '@ant-design/icons';
import { getTopbrowse, getToptags, getSortlist } from '../../../api/homeApi'
import { useState } from 'react';
import * as echarts from 'echarts';
const { Meta } = Card;

export default function Home() {
    const [Topbrowse, setTopbrowse] = useState([])
    const [Toptags, setToptags] = useState([])
    const [allList, setallList] = useState([])
    const [visibles, setvisible] = useState(false)
    // 存放饼图初始化值，防止多次初始化
    const [pieChart, setpieChart] = useState(null)
    // 饼图
    const pieRef = useRef()
    // 获取浏览前十数据
    useEffect(() => {
        getTopbrowse().then(res => {
            setTopbrowse(res.top10Page)
        })
    }, [])
    // 获取点赞前十数据
    useEffect(() => {
        getToptags().then(res => {
            setToptags(res.top10Page)
        })
    }, [])
    // 获取所有已发布文章，各分类数量
    useEffect(() => {
        // 走请求
        getSortlist().then(res => {
            let list = res.pageNum.filter(item => item.pageNum !== 0)
            // renderBarView(list)
            setallList(list)
        })
    }, [])
    

    // 渲染饼图
    const renderPieView = (obj) => {
        //数据处理工作Object.values(obj).map(item => item.categoryName),
        var list = []
        for(var i in allList){
            list.push({
                name:allList[i].categoryName,
                value:allList[i].pageNum
            })
        }
        var myChart;
        if(!pieChart){
            myChart = echarts.init(pieRef.current);
            setpieChart(myChart)
        }else{
            myChart = pieChart
        }
        var option;

        option = {
            title: {
                text: '当前用户文章分类图示',
                // subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '发布数量',
                    type: 'pie',
                    radius: '50%',
                    data: list,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);

    }
    // 获取登录用户信息
    const { userName, regionName, role: { roleName } } = JSON.parse(localStorage.getItem("token"))
    return (
        <div className="site-card-wrapper" style={{ height: '100%'}}>
            <Row gutter={16} style={{ height: '100%' }}>
                <Col span={8} >
                    <Card title="用户最常浏览" bordered={true}>
                        <List
                            size="small"
                            dataSource={Topbrowse}
                            renderItem={item => <List.Item>
                                <a href={`#/news-manage/preview/${item.pageId}`}>{item.title}</a>
                            </List.Item>}
                        />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="用户点赞最多" bordered={true}>
                        <List
                            size="small"
                            dataSource={Toptags}
                            renderItem={item => <List.Item>
                                <a href={`#/news-manage/preview/${item.pageId}`}>{item.title}</a>
                            </List.Item>}
                        />
                    </Card>
                </Col>
                <Col span={8}>
                    <Card
                        cover={
                            <img
                                alt="home"
                                src={require('../../../assets/home.png')}
                            />
                        }
                        actions={[
                            <PieChartOutlined key="setting"
                                onClick={() => {
                                    setTimeout(() => {
                                        setvisible(true)
                                        // init初始化
                                        renderPieView()
                                    }, 0)
                                }}
                            />,
                            <BarChartOutlined key="edit" />,
                            <EllipsisOutlined key="ellipsis" />,
                        ]}
                    >
                        <Meta
                            title={userName}
                            description={
                                <div>
                                    <b>{regionName}</b>
                                    <span style={{
                                        paddingLeft: "30px"
                                    }}>{roleName}</span>
                                </div>
                            }
                        />
                    </Card>
                </Col>
            </Row>
            {/* 侧边弹出框 */}
            <Drawer
                width="500px"
                title="个人文章分类"
                placement="right"
                closable={true}
                onClose={() => {
                    setvisible(false)
                }}
                open={visibles}
            >
                <div ref={pieRef} style={{
                    width: '100%',
                    height: "400px",
                    marginTop: "30px"
                }}></div>
            </Drawer>
        </div>
    )
}
